<template>
  <div>
    <div class="container">
      <svg id="tangram" class="tangram-container" version="1.1" xmlns="http://www.w3.org/2000/svg" :style="bgStyle">
        <polygon v-for="(polygon, index) in polygonData" :key="index" :index="polygon.index" @touchstart.stop.prevent="touchStart" @touchmove="touchMove" @touchend="touchEnd" class="tangram" :points="polygon.points" :style="polygon.style" />
      </svg>
    </div>
  </div>
</template>

<script>
import eventHub from '@/tools/eventHub'
import { mapGetters, mapState } from 'vuex'

export default {
  name: 'sign',
  data () {
    return {
      fx: {},
      fy: {},
      nx: {},
      ny: {},
      tx: {},
      ty: {},
      tangramRect: {},
      marginT: {},
      marginR: {},
      marginL: {},
      marginB: {},
      testUrl: 'http://www.baidu.com/img/bd_logo1.png'
    }
  },
  computed: {
    ...mapState({
      originPoint: ({Weixin}) => Weixin.originPoint
    }),
    ...mapGetters(['polygonData']),
    bgStyle: function () {
      return {
        'background': 'url(' + this.testUrl + ') no-repeat center center, url(' + require('../assets/images/tangram-bg.png') + ') no-repeat 0 0',
        'background-size': '50px 50px, 100% 100%'
      }
    }
  },
  methods: {
    calcMin (pos1, pos2) {
      var result = pos1 - pos2
      return result < 0 ? 0 : result
    },
    touchStart (e) {
      var touch = e.targetTouches[0]
      var index = e.target.getAttribute('index')
      var touchX = touch.pageX
      var touchY = touch.pageY
      this.fx[index] = touchX
      this.fy[index] = touchY

      var targetRect = e.target.getBoundingClientRect()

      this.marginL[index] = this.calcMin(touchX, targetRect.left)
      this.marginR[index] = this.calcMin(targetRect.right, touchX)
      this.marginT[index] = this.calcMin(touchY, targetRect.top)
      this.marginB[index] = this.calcMin(targetRect.bottom, touchY)
    },
    touchMove (e) {
      var touch = e.targetTouches[0]
      var index = e.target.getAttribute('index')
      var polygonData = this.polygonData[index]
      if (!polygonData.movable) {
        return
      }
      var touchX = touch.pageX
      var touchY = touch.pageY
      this.nx[index] = touchX
      this.ny[index] = touchY
      if (
        touchX > this.tangramRect.bLeft + this.marginL[index] &&
        touchX < this.tangramRect.bRight - this.marginR[index]
      ) {
        this.tx[index] += this.nx[index] - this.fx[index]
      }

      if (
        touchY > this.tangramRect.bTop + this.marginT[index] &&
        touchY < this.tangramRect.bBottom - this.marginB[index]
      ) {
        this.ty[index] += this.ny[index] - this.fy[index]
      }
      var polygonXY = this.originPoint[index].points.split(' ')
      var newXY = ''
      for (var i = 0, len = polygonXY.length; i < len; i += 1) {
        var xy = polygonXY[i].split(',')
        var xPoint = xy[0] * 1
        var yPoint = xy[1] * 1
        xPoint += this.tx[index]
        yPoint += this.ty[index]
        newXY += ' ' + xPoint + ',' + yPoint
      }
      polygonData.points = newXY.substring(1)

      this.fx[index] = this.nx[index]
      this.fy[index] = this.ny[index]
    },
    touchEnd () {
      console.log('end')
    }
  },
  created () {
    eventHub.$on('onHub', () => {
      console.log('obHubed')
    })
  },
  mounted () {
    for (let i = 0; i < 7; i += 1) {
      this.tx[i] = 0
      this.ty[i] = 0
    }
    /* for (let i = 0, len = this.polygonData.length; i < len; i += 1) {
      this.originPoint[i] = this.polygonData[i].points
    } */
    var tangramRect = document.querySelector('#tangram').getBoundingClientRect()
    tangramRect.bTop = tangramRect.top + 50
    tangramRect.bRight = tangramRect.right - 50
    tangramRect.bBottom = tangramRect.bottom - 50
    tangramRect.bLeft = tangramRect.left + 50
    this.tangramRect = tangramRect
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
body {
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  -khtml-user-select: none;
  user-select: none;
}
.tangram {
  transform-origin: 50% 50%;
}

.tangram-container {
  position: absolute;
  top: 164px;
  left: 50%;
  transform: translateX(-50%);
  width: 644px;
  height: 644px;
  z-index: 1;
}
</style>
